<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>用车日志</title>
    <link rel="stylesheet" href="css/normalize.css" />
    <!-- font-awesome -->
    <link rel="stylesheet" href="css/font-awesome.css">
    <!-- layui-CSS -->
    <link rel="stylesheet" href="js/layui/css/layui.css">
    <!-- 页面主样式 -->
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/stylexu.css" />
    <style type="text/css">
        .layui-form-radio span {
            display: none;
        }

        .layui-form-radio i {
            margin-right: -20px;
        }

        #checkedAll {
            cursor: pointer;
        }

        table {
            border: none;
        }

        .layui-top-bd .layui-top-second .layui-input-inline {
            width: 200px;
        }

        #searchAlarm {
            width: 100%;
            height: 33px;
            border-radius: 37px;
            border-color: rgba(0, 51, 255, 1);
            border-width: 1px;
            background-color: rgba(255, 255, 255, 1);
            color: rgba(0, 51, 255, 1);
        }

        th {
            text-align: left;
            padding-left: 10px;
            padding-right: 10px;
            border-width: 0 0 1px;
            height: 46px;
            border: solid #ccc 0.5px;
        }

        td {
            text-align: left;
            padding-left: 10px;
            padding-right: 10px;
            border-width: 0 0 1px;
            height: 46px;
            border: solid #ccc 0.5px;
        }

        .sticky {
            background-color: white;
            position: sticky;
            z-index: 1;
            height: 46px;

            left: 0;
            text-align: left;
        }

        img {
            width: 100px;
            height: 100px;
        }

        .c-left {

            padding-left: 30px;

        }

        .c-right {
            padding-right: 30px;

        }

        .cc {
            background-color: #ffffff;

            height: calc(100vh - 130px);
            border-radius: 10px;
            overflow-y: scroll;
        }

        .layui-input-inline {
            float: right;
            margin-top: 20px;
            margin-right: 15px;
        }

        .layui-input-inline button {
            background: #fff;
            border: 1 px solid #4B74FF !important;
            color: #4B74FF;
            border-radius: 24px;
            font-family: sans-serif;
            white-space: inherit;
            height: 32px;
            line-height: 32px;
            width: 70px;
            font-size: 12px;
            text-align: left;
            padding-left: 8px;
            padding-right: 7px;
            cursor: pointer;
        }




        .c-model {
            padding: 20px 0;
            border-bottom: 1px dashed #999999;
            margin: 0 20px;
            margin-top: 25px;
        }

        .c-model .title {
            font-size: 18px;
            font-weight: 500;
            padding-bottom: 20px;
        }

        .c-model .layui-row {
            font-size: 14px;
            color: #666666;

        }

        .c-model .layui-row .layui-col-md6 {
            padding: 15px 0;
        }

        .carLog-t {
            padding: 20px;
            font-size: 16px;
            font-weight: 500;
        }

        .time-line {
            padding: 20px;
        }

        .layui-text {
            border: none;
        }

        .stop {
            color: red;
        }

        #map {
            width: 100%;
            height: 100%;
            margin: 0px
        }
    </style>
    <link rel="stylesheet" href="css/alarm.css" />
</head>

<body>
    <div class="layui-layout layui-layout-admin">

        <div class="layui-side layui-bg-black">

            <div class="layui-side-scroll">

                <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                <ul class="layui-nav layui-nav-tree" lay-filter="test">
                    <li class="layui-nav-item">
                        <a href="javascript:;"><i class="fa fa-vcard"></i><cite>会员管理</cite></a>
                        <dl class="layui-nav-child">
                            <dd>
                                <a href="javascript:;">微信群发</a>
                            </dd>
                            <dd>
                                <a href="javascript:;">文章管理</a>
                            </dd>
                            <dd>
                                <a href="javascript:;">新建文章</a>
                            </dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;"><i class="fa fa-anchor"></i><cite>车辆审核</cite></a>
                        <dl class="layui-nav-child">
                            <dd>
                                <a href="javascript:;">经销商数据</a>
                            </dd>
                            <dd>
                                <a href="javascript:;">全国平均数据</a>
                            </dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;"><i class="fa fa-anchor"></i><cite>区域后台-统计管理</cite></a>
                        <dl class="layui-nav-child">
                            <dd>
                                <a href="javascript:;" class="menu_three ">停车统计</a>
                                <ol class="layui-nav-child " style="display: none;">
                                    <li><a href="javascript:;"><cite></cite>停车日志</cite></a></li>

                                </ol>
                            </dd>
                        </dl>

                    </li>
                </ul>
            </div>
        </div>


        <div class="layui-body layui-form">
            <div style="padding:20px;padding-top:0px;">
                <!-- 头 -->
                <div style="padding-bottom: 15px;">
                    <div style="margin: 15px;">
                        <span style="font-size: 20px;font-weight: 800;">用车日志</span>
                    </div>
                    <hr style="background-color: black; border: none; height: 1px;">
                </div>
            </div>
            <div class="layui-row layui-col-space20">
                <div class="layui-col-md6 c-left">
                    <div class="cc">
                        <div style="overflow: hidden;padding-bottom: 20px;">

                            <div style="font-size: 14px;">

                                <div class="layui-input-inline">
                                    <button style="border-color: #4B74FF;" class="layui-btn layui-btn-primary layui-btn-sm" type="button" id="goBack">
                                        <i class="layui-icon">&#xe65c;</i>返回</button>
                                </div>
                                <div class="layui-input-inline">
                                    <button style="border-color: #4B74FF;" class="layui-btn layui-btn-primary layui-btn-sm" type="button" id="export">
                                        <i class="layui-icon">&#xe601;</i>导出</button>
                                </div>
                            </div>

                        </div>
                        <div class="c-model">
                            <div class="title">订单信息</div>
                            <div class="layui-row">
                                <div class="layui-col-md6">订单编号：1234567890</div>
                                <div class="layui-col-md6">订单类型：因公订单</div>
                                <div class="layui-col-md6">下单时间：2018-02-02 08:00:00</div>
                                <div class="layui-col-md6">还车时间：2018-02-02 15:00:00</div>
                            </div>
                        </div>
                        <div class="c-model">
                            <div class="title">车辆信息</div>
                            <div class="layui-row">
                                <div class="layui-col-md6">车牌号：吉A20M97</div>
                                <div class="layui-col-md6">底盘号：LFV2A215XL3522643</div>
                                <div class="layui-col-md6">车系：全新宝来</div>
                                <div class="layui-col-md6">车系：自动时尚型</div>
                            </div>
                        </div>
                        <div class="c-model">
                            <div class="title">员工信息</div>
                            <div class="layui-row">
                                <div class="layui-col-md6">用户姓名：张三</div>
                                <div class="layui-col-md6">用户手机号：18812345678</div>
                                <div class="layui-col-md6">大众-华南区</div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6 c-right ">
                    <div class="cc">
                        <div class="carLog-t">
                            用车信息
                        </div>
                        <div class="time-line">
                            <ul class="layui-timeline">
                                <li class="layui-timeline-item">
                                    <i class="layui-icon layui-timeline-axis start">&#xe63f;</i>
                                    <div class="layui-timeline-content layui-text">
                                        <h3 class="layui-timeline-title">车辆点火</h3>
                                        <p>
                                            2021-09-03 08:00:00
                                        </p>
                                    </div>
                                </li>
                                <li class="layui-timeline-item">
                                    <i class="layui-icon layui-timeline-axis stop">&#xe63f;</i>
                                    <div class="layui-timeline-content layui-text">
                                        <h3 class="layui-timeline-title">车辆熄火</h3>
                                        <p>系统位置：<a data-mark ="116.39, 39.9" class="openMap" href="javascript:;">吉林省长春市XX区XX路XX号</a></p>
                                        <p>手动位置：吉林省长春市XX区XX路XX号</p>
                                    </div>
                                </li>
                                <li class="layui-timeline-item">
                                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                    <div class="layui-timeline-content layui-text">
                                        <h3 class="layui-timeline-title">车辆点火</h3>
                                        <p>
                                            2021-09-03 08:00:00
                                        </p>
                                        <p>停车时长：1小时00分00秒</p>
                                    </div>
                                </li>
                                <li class="layui-timeline-item">
                                    <i class="layui-icon layui-timeline-axis stop">&#xe63f;</i>
                                    <div class="layui-timeline-content layui-text">
                                        <h3 class="layui-timeline-title">车辆熄火</h3>
                                        <p>系统位置：<a data-mark ="126.39, 39.9" class="openMap" href="javascript:;">吉林省长春市XX区XX路XX号</a></p>
                                        <p>手动位置：吉林省长春市XX区XX路XX号</p>
                                    </div>
                                </li>
                                <li class="layui-timeline-item">
                                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                    <div class="layui-timeline-content layui-text">
                                        <h3 class="layui-timeline-title">车辆点火</h3>
                                        <p>
                                            2021-09-03 08:00:00
                                        </p>
                                        <p>停车时长：1小时00分00秒</p>
                                    </div>
                                </li>
                                <li class="layui-timeline-item">
                                    <i class="layui-icon layui-timeline-axis stop">&#xe63f;</i>
                                    <div class="layui-timeline-content layui-text">
                                        <h3 class="layui-timeline-title">车辆熄火</h3>
                                        <p>系统位置：<a data-mark ="116.39, 39.9" class="openMap" href="javascript:;">吉林省长春市XX区XX路XX号</a></p>
                                        <p>手动位置：吉林省长春市XX区XX路XX号</p>
                                    </div>
                                </li>
                                <li class="layui-timeline-item">
                                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                    <div class="layui-timeline-content layui-text">
                                        <h3 class="layui-timeline-title">车辆点火</h3>
                                        <p>
                                            2021-09-03 08:00:00
                                        </p>
                                        <p>停车时长：1小时00分00秒</p>
                                    </div>
                                </li>

                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- jQuery -->
        <script type="text/javascript" src="./js/jquery-3.1.1.min.js"></script>
        <!-- layui-JS -->
        <script type="text/javascript" src="./js/layui/layui.js"></script>
        <script src="https://webapi.amap.com/maps?v=1.4.2&key=608d75903d29ad471362f8c58c550daf"></script>
        <!-- 高德地图测试KEY  需换入自己KEY -->

        <script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script>
        <script>
            layui.use(['table', 'element', 'form', 'layedit', 'laydate', 'laypage', 'layer', 'upload'], function () {
                var element = layui.element, $ = layui.jquery;
                var marker
                var map = new AMap.Map('map', {
                    resizeEnable: true,
                    center: [116.480983, 39.989628],
                    zoom: 11
                });
                AMap.plugin('AMap.ToolBar', function () {
                    var toolbar = new AMap.ToolBar();
                    map.addControl(toolbar)
                })
                $(".menu_three").on("click", function () {

                    $(this).next().toggle();
                    $.each($(this).parent().siblings(), function (i, e) {
                        $(e).find("ol").hide();;
                    });

                })
                $("ol").on("click", "li a", function () {
                    $.each($(this).parent().siblings(), function (i, e) {
                        $(e).find("a").removeClass('three_this')
                    });
                    $(this).addClass('three_this'); // 添加当前元素的样式
                })

                $(".openMap").on('click', function () {
                    var marks = $(this).attr("data-mark").split(',')
                 
                    if(marker&&map){
                        map.remove(marker);//移除已存在标记点
                       
                    }
                    if(map){
                        map.setCenter(marks);//设置地图中心店坐标
                    }
                   
                    marker = new AMap.Marker({
                        position: new AMap.LngLat(marks[0],marks[1]),   // 设置标记点坐标
                        title: $(this)[0].innerText
                    });

                    // 将创建的点标记添加到已有的地图实例：
                    map.add(marker);
                    layer.open({
                        type: 1,
                        title: $(this)[0].innerText,
                        area: ['800px', '500px'],
                        content: $('#map')
                    })
                })

            });
        </script>

</body>
<div id="map">

</div>

</html>